<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="./gsheet.js"></script>
  <link rel="stylesheet" href="../assets/luckysheet/plugins/css/pluginsCss.css" />
  <link rel="stylesheet" href="../assets/luckysheet/plugins/plugins.css" />
  <link rel="stylesheet" href="../assets/luckysheet/css/luckysheet.css" />
  <link rel="stylesheet" href="../assets/luckysheet/assets/iconfont/iconfont.css" />
  <script src="../assets/luckysheet/plugins/js/plugin.js"></script>
  <script src="../assets/luckysheet/luckysheet.umd.js"></script>
  <script src="../assets/axios.js"></script>
  <style>
    .container {
      display: flex;
    }

    .left {
      width: 300px;
      background-color: lightblue;
      padding: 10px;
    }

    .right {
      flex-grow: 1;
      background-color: lightgreen;
    }
  </style>
</head>

<body>
  <div><button id="tmpl">读取模板</button><button id="fill">填充数据</button></div>
  <div class="container">
    <div class="left"></div>
    <div class="right" id="luckysheet" style="height:600px;"></div>
  </div>
  <script>
    // luckysheet.create({
    //   container: 'luckysheet',
    //   // data: [{ celldata: celldata }]
    // })
    let cells = [
      [null, { v: "上方" }, { v: "$r{ds1.columns}", ht: 0, bg: "gray" }, { v: "eeeee" }, null],
      [{ v: "1-0" }, { v: "@d{ds1.name } ", bg: "#93c47d" }, { v: 443, bg: "blue", ht: 2 }, { v: 33333 }],
      [null, { v: "下方" }, null, null, null],
      [{ v: 323 }, { v: 222222222 }, { v: 23 }, null, { v: "${ds1._label}" }]
    ]
    let celldata = [
      { "r": 0, "c": 1, "v": { "v": "上方", "m": "上方", "ct": { "fa": "General", "t": "g" } } },
      { "r": 0, "c": 2, "v": { "v": "$r{ds1.columns}", "ht": 0, "bg": "gray", "m": "$r{ds1.columns}", "ct": { "fa": "@", "t": "s" } } },
      { "r": 0, "c": 3, "v": { "v": "eeeee", "m": "eeeee", "ct": { "fa": "General", "t": "g" } } },
      { "r": 1, "c": 0, "v": { "v": "1-0", "m": "1-0", "ct": { "fa": "General", "t": "g" } } },
      { "r": 1, "c": 2, "v": { "v": 443, "bg": "blue", "ht": 2, "ct": { "fa": "General", "t": "n" }, "m": "443" } },
      { "r": 2, "c": 1, "v": { "v": "下方", "m": "下方", "ct": { "fa": "General", "t": "g" } } },
      { "r": 3, "c": 1, "v": { "v": 222222222, "ct": { "fa": "General", "t": "n" }, "m": "222222222" } },
      { "r": 3, "c": 4, "v": { "v": "${ds1._label}", "m": "${ds1._label}", "ct": { "fa": "@", "t": "s" } } }
    ]
    createSheet(luckysheet, "luckysheet", {
      order: 0,
      row: 10, column: 5,
      config: {
        columnlen: { "4": 182 },
        rowlen: { "2": 80 },
        merge: {},
      },
      data: cells,
      toolbutton: {
        customButton: {
          text: '自定义按钮',
          icon: 'icon-custom',
          click: function () {
            luckysheet.showContextMenu([
              {
                text: '菜单项1',
                click: function () {
                  alert('你选择了菜单项1');
                }
              },
              {
                text: '菜单项2',
                click: function () {
                  alert('你选择了菜单项2');
                }
              }
            ]);
          }
        }
      }
    })
    function fill() {
      var data = loadSheetConfig("", "", "", cells)
      console.log("datas", data)
      updateSheet(luckysheet, 0, data)
    }
    // 获取按钮元素
    const fillBtn = document.getElementById('fill');
    // 为按钮添加点击事件监听器
    fillBtn.addEventListener('click', fill);
    function tmpl() {
      var tmpl = {
        showtoolbar: false, //是否第二列显示工具栏
        showinfobar: false, //是否显示顶部名称栏
        showsheetbar: false, //是否显示底部表格名称区域
        showstatisticBar: false, //是否显示底部计数栏 
        pointEditZoom: 1, //编辑器表格编辑时缩放比例
        allowEdit: false, //是否允许前台编辑
        sheetFormulaBar: false, //是否显示公式栏
        enableAddRow: false,//允许添加行
        ...getSheetTmpl(luckysheet)
      }
      console.log(tmpl)
      luckysheet.destroy()
      tmpl.container = "luckysheet"

      luckysheet.create(tmpl)
    }
    const tmplBtn = document.getElementById('tmpl');
    tmplBtn.addEventListener('click', tmpl);
    function loadds() {
      axios.get('https://jsonplaceholder.typicode.com/posts/1')
        .then(function (response) {
          console.log(response.data);
        })
        .catch(function (error) {
          console.error(error);
        });
    }
  </script>
</body>

</html>